<template>
	<div class="header">
		<div class="iconfont text_left">&#xe625;</div>
		<div  class="text_center">
			<i class="iconfont">&#xe635;</i>
			<span>输入城市/景点/游玩主题</span>
		</div>
		<router-link to="/city">
			<div class="text_right">
				<span>{{city}}</span>
				<i class="iconfont">&#xe62f;</i>
			</div>
		</router-link>
	</div>
</template>
<script>
	import {mapState} from 'vuex'
	export default{
		methods:{
			citygo(){
				this.$router.push("/city");
			}
		},
		computed:{
			...mapState(['city'])
		}
	}
</script>
<style scoped lang="stylus">
	@import '~@/assets/css/css.styl'
	.header{
		background: $bgColor;
		display: flex;
		width: 100%;
		height: 0.88rem;
		line-height: 0.88rem;
		color:#fff;
		font-size:0.28rem;
	}
	.text_left{
		padding-left:0.2rem;
		padding-right:0.2rem;
		cursor:pointer;
	}
	.text_center{
		flex:1;
		margin:0.14rem 0;
		display: block;
		background: #fff;
		line-height:0.6rem;
		color: #e4e7ea;
		border-radius:0.1rem;
		padding-left: 0.2rem;
		margin-right: 0.1rem;
	}
	.text_right{
		display: inline-block;
		cursor:pointer;
		padding:0 0.2rem;
		color:#fff;
	}
</style>